<template>
    <div>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="username" label="姓名" placeholder="姓名"
                    :rules="[{ required: true, message: '请填写姓名' }]" />
                <van-field v-model="password" type="text" name="password" label="电话" placeholder="电话"
                    :rules="[{ required: true, message: '请填写电话' }]" />
            </van-cell-group>
            <van-field v-model="result" is-link readonly name="area" label="地区选择" placeholder="点击选择省市区"
                @click="showArea = true" />

            <van-cell-group inset>
                <van-field v-model="name" name="name" label="纤细地址" placeholder="纤细地址"
                    :rules="[{ required: true, message: '请填写纤细地址' }]" />
                <van-field v-model="text" type="text" name="text" label="邮政编码" placeholder="邮政编码"
                    :rules="[{ required: true, message: '请填写邮政编码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>

        </van-form>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const username = ref('');
const password = ref('');
const name = ref('');
const text = ref('');
import { loginApi } from '@/api/api';
const onSubmit = () => {
    loginApi(username.value, password.value).then((res) => {
        console.log(res);

    })
}
</script>

<style lang="scss" scoped></style>